<template>
	<view class="my_btn">
		<button mini class="my_btnFont">{{props.title}}</button>
	</view>
</template>

<script lang="ts" setup>
	const props = defineProps(["title","width","height","color","fontColor"])
	let width :any
	let height :any
	let fontColor:any
	let borderRadius :any
	console.log('width==>>',props.width);
	if(!props.width){
		 width = '13vw'
	}else{
		width = props.width
	}
	if(!props.height){
		 height = '8vh'
	}else{
		height = props.height
	}
	if(!props.fontColor){
		 fontColor = '#fff'
	}else{
		fontColor = props.fontColor
	}
	borderRadius =  (Number(width.split('v')[0]) / 4).toString()  + 'vw'
	console.log('width',width);
	const goBack = () => {
		uni.navigateBack()
	}
</script>

<style>
	.my_btn{
		width: v-bind(width);
		height: v-bind(height);
		border-radius: v-bind(borderRadius) ;
		overflow: hidden;
		border: none;
	}
	.my_btnFont{
		width: v-bind(width);
		height: v-bind(height);
		background-color: v-bind(props.color);
		color: v-bind(fontColor);
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		font-size: 0.9rem;
		border: none;
	}
</style>